<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar title="正文" right-text="按钮" @click-left="onClickLeft" @click-right="onClickRight" fixed
    style="z-index: 9999;">
    <template #left>
      <van-icon name="arrow-left" size="24" color="#000" />
    </template>
    <template #right>
      <van-icon name="share-o" size="24" color="#000" />
    </template>
  </van-nav-bar>

  <van-loading type="spinner" v-if="!isShow" vertical size="30px" color="#969799" style="margin-top: 10vh;">加载中...
  </van-loading>

  <div class="art-detail-container" v-else>
    <van-config-provider :theme-vars="themeTags">
      <van-image v-if="articleData.imgUrl" :src="articleData.imgUrl" />
      <!-- 文章主体 -->
      <div class="detail" ref="detailSticky">
        <div class="detail-title">
          <h1>{{ articleData.title }}</h1>
        </div>
        <van-sticky :container="detailSticky" :offset-top="46">
          <div class="detail-author">
            <div class="author-avator">
              <van-image round width="35" height="35" fit="cover" :src="articleData.authorInfo.avatarUrl" />
            </div>
            <div class="author-info">
              <div class="top">
                <p class="author-name">{{ articleData.authorInfo.userName }}</p>
                <van-tag type="success" v-if="articleData.authorInfo.level <= 5">Lv.{{ articleData.authorInfo.level }}
                </van-tag>
                <van-tag type="primary" v-else-if="articleData.authorInfo.level <= 10">Lv.{{
                    articleData.authorInfo.level
                }}</van-tag>
                <van-tag type="warning" v-else-if="articleData.authorInfo.level <= 15">Lv.{{
                    articleData.authorInfo.level
                }}</van-tag>
                <van-tag type="danger" v-else>Lv.{{ articleData.authorInfo.level }}</van-tag>
              </div>
              <p class="time">{{ articleData.date }}</p>
            </div>
            <div class="follow-btn">
              <van-icon name="plus" size="14" color="#fff" />
              <p class="btn-text">关注</p>
            </div>
          </div>
        </van-sticky>
        <div class="detail-content">
          <rich-text-display :article-content="articleContent"></rich-text-display>
        </div>
      </div>
      <!-- 文章评论 -->
      <div class="art-comment">
        <div class="nav">
          <p class="nav-title" v-if="commentInfo">评论区（{{ commentInfo.length }}）</p>
        </div>
        <div v-if="commentInfo.length !== 0">
          <template v-for="item in commentInfo">
            <article-comments :authorName="articleData.authorInfo.userName" :commentInfo="item"></article-comments>
          </template>
          <van-divider :style="{ color: '#c8c9cc', borderColor: '#fff' }">已加载全部评论···</van-divider>
        </div>
        <van-empty v-else description="暂无评论" />
      </div>
    </van-config-provider>
  </div>

  <div class="comment-bar van-hairline--top">
    <div class="left" @click="showCommentPopup">
      <p>评论（已有{{ commentInfo.length }}条评论）</p>
    </div>
    <div class="right">
      <div class="bar-item" @click="starClick">
        <van-icon name="star" :color="changeStarColor" size="20" />
        <p class="bar-item-text" v-if="isStar" style="color: #646566;">已收藏</p>
        <p class="bar-item-text" v-else>收藏</p>
      </div>
      <div class="bar-item" @click="likeClick">
        <van-icon name="good-job" :color="changeLikeColor" size="20" />
        <p class="bar-item-text" v-if="isLike" style="color: #646566;">已点赞</p>
        <p class="bar-item-text" v-else>点赞</p>
      </div>
    </div>
  </div>
  <!-- 评论框弹出层 -->
  <van-popup v-model:show="commentShow" position="bottom">
    <div class="editer">
      <textarea class="editer-area" v-model="userComment" cols="30" rows="10" autofocus="autofocus"
        placeholder="输入一条友善的评论"></textarea>
    </div>
    <div class="editer-btn">
      <van-button type="primary" block color="linear-gradient(135deg, #464b50, #14191e)" @click="editerBtnClick">发送
      </van-button>
    </div>
  </van-popup>
  <!-- 分享组件 -->
  <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
</template>


<script setup>
import richTextDisplay from '../../components/richText/richTextDisplay.vue';
import articleComments from '../../components/articleComments/articleComments.vue';

import { nextTick, onMounted, reactive, ref, computed } from 'vue'
import { Toast } from 'vant'

import router from '../../route';
import { useUserStore } from '../../store/user'

import { getArticleDetail } from '../../network/article'

const articleData = reactive({
  id: 0,
  title: '',
  date: '',
  tag: '',
  comment: 0,
  imgUrl: '',
  position: '',
  artBody: {},
  authorInfo: {}
})
// 富文本内容
const articleContent = ref('')
// 文章评论
const commentInfo = reactive([])
// 作者信息
let ArtId = ref(0)
let isShow = ref(false)
onMounted(() => {
  ArtId.value = router.currentRoute.value.query.id
  getArticleDetail(ArtId.value).then(res => {
    const result = res.data
    for (let key in result) {
      articleData[key] = result[key]
    }
    console.log(articleData);
    // 富文本内容
    articleContent.value = result.artBody.content

    // 文章评论
    if (result.articlecomment) {
      commentInfo.push(...result.articlecomment)
    }
    nextTick(() => {
      isShow.value = true
    })
  }).catch(err => {
    Toast.fail('文章加载出错')
    console.log(err);
  })
})

// 点击左侧按钮返回上级路由
const onClickLeft = () => {
  history.back()
};
// 分享面板
let showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: 'QQ', icon: 'qq' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '二维码', icon: 'qrcode' },
];
// 点击右侧按钮显示分享面板
const onClickRight = () => {
  showShare.value = true
}
const onSelect = (option) => {
  Toast(option.name);
  if (option.name === '复制链接') {
    console.log(window.location.href);
  }
  showShare.value = false;
};

// 重写tags样式
const themeTags = {
  tagPadding: '2px 5px',
  tagFontSize: '8px',
  tagLineHeight: '8px'
}
// 作者栏吸顶定位
const detailSticky = ref(null)

// 收藏点击事件
const isStar = ref(false)
const starClick = () => {
  isStar.value = !isStar.value
  if (isStar.value) {
    Toast.success('已收藏')
  } else {
    Toast.success('已取消收藏')
  }
}
const changeStarColor = computed(() => {
  if (isStar.value) {
    return '#646566'
  } else {
    return '#c8c9cc'
  }
})
// 点赞点击事件
const isLike = ref(false)
const likeClick = () => {
  isLike.value = !isLike.value
  if (isLike.value) {
    Toast.success('已点赞')
  } else {
    Toast.success('已取消点赞')
  }
}
const changeLikeColor = computed(() => {
  if (isLike.value) {
    return '#646566'
  } else {
    return '#c8c9cc'
  }
})
const commentShow = ref(false)
const showCommentPopup = () => {
  commentShow.value = true
}

// 用户输入的评论
const userComment = ref('')
// 通过pinia获取用户登录后的基本信息
const userStore = useUserStore()
const editerBtnClick = () => {
  console.log(userComment.value);
  if (userComment.value !== '') {
    commentInfo.push({
      avatarUrl: userStore.userInfo.avatarUrl,
      userName: userStore.userInfo.name,
      level: userStore.userInfo.level,
      time: '刚刚',
      thumb: 0,
      content: userComment.value
    })
    Toast.success('评论成功')
    commentShow.value = false
  } else {
    Toast.fail('请先输入内容~')
  }
}
</script>

<style scoped>
.art-detail-container {
  margin-top: 46px;
  padding-bottom: 50px;
  background-color: #fff;
}

.detail .detail-title>h1 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  padding: 10px;
  margin: 0;
}

.detail-author {
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 0;
  background-color: #fff;
}

.detail-author .author-info {
  margin-left: 10px;
  margin-right: auto;
}

.detail-author .author-info .top {
  display: flex;
  align-items: center;
}

.detail-author .author-info .top .author-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #323233;
  margin-right: 5px;
}

.detail-author .author-info .time {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #969799;
}

.detail-author .follow-btn {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background: #14191e;
  border-radius: 3px;
}

.detail-author .follow-btn .btn-text {
  margin-left: 2px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
}

.art-comment {
  border-top: 3px solid #f2f3f5;
  padding: 10px 14px 0px 14px;
}

.art-comment .nav .nav-title {
  line-height: 22px;
  font-size: 17px;
  font-weight: 500;
  color: #323233;
}

.comment-bar {
  position: fixed;
  bottom: 0;
  z-index: 999;
  padding: 0px 10px;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
}

.comment-bar .left {
  height: 35px;
  border-radius: 3px;
  background-color: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 1 auto;
}

.comment-bar .left p {
  font-size: 14px;
  line-height: 20px;
  color: #c8c9cc;
}

.comment-bar .right {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.comment-bar .bar-item {
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.comment-bar .bar-item .bar-item-text {
  margin-top: 2px;
  font-size: 10px;
  color: #c8c9cc;
}

.editer {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.editer .editer-area {
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 15px;
  line-height: 21px;
  color: #323233;
}

.editer .editer-area::-webkit-input-placeholder {
  font-size: 15px;
  line-height: 21px;
  color: #c8c9cc;
}

.editer-btn {
  padding: 0px 10px 10px 10px;
}
</style>
